<template>
	<view class="content">
		<view class="card-list">
			<view class="card-list-li before po flex" @click="openCard" v-show="is_card">
				<view class="card-list-images ">
					<image :src="cardData.logo" class="card-list-image" mode=""></image>
				</view>
				<view class="card-list-inner">
					<text class="card-list-name">
						{{cardData.name}}
					</text>
					<text>
						{{cardData.card_no}}
					</text>
				</view>
			</view>
			<view class="cardBtn" @click="openCard"  v-show="!is_card">点击选择银行卡</view>
		</view>
		
		<view class="withdraw">
			<view class="withdraw-tips">
				提现金额
				<template v-if="withdrawal_fee.fee_ratio == 0">
					(提现手续费为0)
				</template>
				<template v-else>
					(提现手续费率 为{{(withdrawal_fee.fee_ratio * 100).toFixed(1)}}%)
				</template>
				
			</view>
			<view class="withdraw-input">
				<input class="uni-input" v-model="amount" type="number"  />
				<text class="withdraw-input-i">¥</text>
			</view>
			<view class="flex ptm1">
				<view class="colorc">可以提现余额 {{money}} 元</view>
				<text class="color" @click="on">
					全部提现
				</text>
			</view>
		</view>
		<view class="foot" @click="post">
			确认提现
		</view>
	</view>
</template>

<script>
	import {
        mapState,
        mapMutations
    } from 'vuex'
	
	export default {
		computed: {
            ...mapState(['token'])
        },
		onLoad() {
			
		},
		onShow() {
			// 监听token登录状态请求会员信息
			if(this.token){
				this.getCard()				
			}
		},
		data() {
			return {
				amount: '',
				cardData: {},
				withdrawal_fee: 0,
				money: 0,
				is_card: false
			}
		},
		methods: {
			...mapMutations(['getNetworkType','vuexRequest']),
			getCard() {
				this.vuexRequest({
					url: '/api/v2/member/withdraw/get-default?access-token=' + this.token,
					method: 'POST',
					data: {},
					success: (res)  => {
						this.withdrawal_fee = res.data.data.withdrawal_fee
						this.money = res.data.data.money
						if(!res.data.data.bank_info){
							uni.showModal({
								title: '提示',
								content: '没有默认银行卡！ 立即添加？',
								success:  (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/wallet/card-list/card-list'
										});
									}
								}
							});
						}else{
							this.is_card=true
							this.cardData = res.data.data.bank_info
						}
					},
					fail: (err)  => {
						uni.showToast({
							title: err.data.message,
							position:'bottom'
						})
					},
				})	
			},
			on() {
				this.amount = this.money
			},
			post() {
				if(!this.amount){
					uni.showToast({
						title: "请输入提现金额",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				if(!this.cardData.id){
					uni.showToast({
						title: "请选择提现账户",
						icon: 'none',
						position:'bottom'
					})
					return !1
				}
				let data = {amount:this.amount,bank_id:this.cardData.id}
				this.vuexRequest({
					url: '/api/v2/member/withdraw/create?access-token=' + this.token,
					method: 'POST',
					data: data,
					success: (res)  => {
						
						uni.showToast({
							title: res.data.message,
							position:'bottom'
						})
						uni.navigateBack()
					},
					fail: (err)  => {
						uni.showToast({
							title: err.data.message,
							position:'bottom'
						})
					},
				})	
			},
			openCard() {
				uni.navigateTo({
					url: '/pages/wallet/card-list/card-list',
					fail(err) {
						console.log(err)
					}
				});
			}
		}
	}
</script>

<style>
	.cardBtn{
		text-align: center;
		background: #F8F8F8;
		padding: 50upx 0;
		color: #e73f3f;
	}
	.color{
		color: #e73f3f;
	}
	.colorc{
		color: #9b9b9b;
	}
	.ptm1{
		padding: 20upx 0;
	}
	.mt1{
		margin: 20upx  0 0 0;
	}
	.flex{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.po{
		position: relative;
	}
	.po:after{
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}
	.card-list-image{
		width: 100upx;
		height: 100upx;
	}
	.card-list-inner{
		width: 100%;
		padding: 0 0 0 20upx;
		font-size: 26upx;
		color: #5d5d5d;
	}
	.card-list-li {
		padding: 20upx 30upx;
		background: #FFFFFF;
		position: relative;
		margin: 20upx 0 0 0;
	}
	.card-list-name{
		display: block;
		color: #010101;
		font-size: 32upx;
	}
	.card-list-images{
		height: 100upx;
	}
	.before:before{
		position: absolute;
		z-index: 10;
		right: 30upx;
		top: 50%;
		margin: -8upx 0 0 0;
		content: '';
		display: block;
		width: 16upx;
		height: 16upx;
		border: solid 2upx #989898;
		transform:rotate(45deg);
		border-left: none;
		border-bottom: none;
	}
	.withdraw{
		background: #FFFFFF;
		padding: 20upx 30upx 0 30upx;
		margin: 20upx 0 0 0;
	}
	.withdraw-input{
		position: relative;
		
	}
	.withdraw-input .withdraw-input-i{
		position: absolute;
		left: 0;
		top: 50%;
		width: 20upx;
		height: 40upx;
		display: block;
		margin: -20upx 0 0 0;
		line-height: 40upx;
		font-size: 70upx;
	}
	.withdraw-input input {
		border-bottom: solid 1px #c8c7cc;
		padding: 40upx 20upx 40upx 80upx;
		font-size: 35upx;
	}
	.foot{
		color: #FFFFFF;
		width: 85%;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		border-radius: 100px;
		margin: 80upx auto 0 auto;
	}
</style>
